<template>
  <div class="profile-container">
    <div class="top-title-group">新增客服信息</div>
    <div class="middle-form-group">
      <el-form
        ref="profileForm"
        :model="profileForm"
        :rules="rules"
        label-width="150px"
        label-position="left"
      >
        <el-form-item label="上传头像">
          <div class="upload-item-group">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-avatar style="margin-left:30px" shape="square" :size="150" :src="squareUrl"></el-avatar>
          </div>
          <div class="upload-msg-style">建议上传图片尺寸为60px*60px，若不设置则使用系统默认头像</div>
        </el-form-item>
        <el-form-item required label="邮箱地址" prop="email">
          <el-input style="width:400px" v-model="profileForm.email" placeholder="该邮箱将作为客服人员的登录账号"></el-input>
        </el-form-item>
        <el-form-item required label="客服昵称" prop="nickName">
          <el-input style="width:400px" v-model="profileForm.nickName" placeholder="与外部客户沟通时使用"></el-input>
        </el-form-item>
        <el-form-item required label="真实姓名" prop="realName">
          <el-input style="width:400px" v-model="profileForm.realName" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="客服工号" prop="customerServiceId">
          <el-input
            style="width:400px"
            v-model="profileForm.customerServiceId"
            placeholder="请输入客服工号"
          ></el-input>
        </el-form-item>
        <el-form-item label="客服手机号码" prop="customerServicePhone">
          <el-input
            style="width:400px"
            v-model="profileForm.customerServicePhone"
            placeholder="请输入客服手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="type=='create'" required label="初始登录密码" prop="password">
          <el-input
            style="width:400px"
            v-model="profileForm.password"
            placeholder="6到16个字符，至少包含大小写字母 数字中的两种"
          ></el-input>
        </el-form-item>
        <div
          style="padding-top: 20px;
                    border-top: 1px solid #f2f2f2;
                    margin-bottom: 20px;"
        >
          <el-form-item label="选择分组" prop="serviceGroup">
            <el-select style="width:400px" v-model="profileForm.serviceGroup" placeholder="请选择分组">
              <el-option label="客服组一" value="first"></el-option>
              <el-option label="客服组二" value="second"></el-option>
              <el-option label="客服组三" value="third"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item required label="选择角色" prop="serviceRole">
            <el-select style="width:400px" v-model="profileForm.serviceRole" placeholder="请选择角色">
              <el-option label="管理员" value="first"></el-option>
              <el-option label="超级管理员" value="second"></el-option>
              <el-option label="工单客服" value="third"></el-option>
              <el-option label="在线客服" value="forth"></el-option>
              <el-option label="客服主管" value="fifth"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务上限（人）">
            <el-input style="width:400px" v-model="serviceNum" placeholder></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="back()">取消并返回</el-button>
            <el-button
              type="primary"
              :loading="isLoading"
              @click="handleSaveProfile('profileForm')"
            >保 存</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  name: "SettingCsDetail",
  components: {},
  props: {},
  data() {
    return {
      imageUrl: "",
      serviceNum: 100,
      type: "",
      profileForm: {},
      isLoading: false,
      rules: {
        email: [
          {
            type: "email",
            required: true,
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        nickName: [
          {
            required: true,
            message: "请输入客服名称",
            trigger: ["blur", "change"]
          }
        ],
        realName: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: ["blur", "change"]
          }
        ],
        customerServicePhone: [
          { max: 11, message: "电话号码长度不能超过11位", trigger: "blur" }
        ],
        serviceRole: [
          {
            required: true,
            message: "请选择客服角色",
            trigger: ["blur", "change"]
          }
        ],
        password: [
          {
            min: 6,
            required: true,
            message: "请选择初始登录密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    handleSaveProfile(formName) {
      this.isLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.type == "update") {
            api.updateCustomerServiceAPI(this.profileForm).then(res => {
              this.isLoading = false;
              let { error, data } = res.data;
              if (error) {
                this.$message.error(data);
              } else {
                this.$message({
                  message: "客服信息修改成功",
                  type: "success"
                });
                this.$router.push("/setting/cs-management");
              }
            });
          } else {
            api.createCustomerServiceAPI(this.profileForm).then(res => {
              this.isLoading = false;
              let { error, data } = res.data;
              if (error) {
                this.$message.error(data);
              } else {
                this.$message({
                  message: "创建客服成功",
                  type: "success"
                });
                this.$router.push("/setting/cs-management");
              }
            });
          }
        } else {
          this.$message({
            message: "表单填写错误",
            type: "warning"
          });
        }
      });
    },
    back() {
      this.$router.push("/setting/cs-management");
    }
  },
  created() {
    this.profileForm = this.$route.params.data;
    this.type = this.$route.params.type;
  },
  mounted() {}
};
</script>


<style scoped>
.profile-container {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
}
.middle-form-group {
  padding-left: 60px;
}
.upload-item-group {
  display: flex;
  align-items: center;
}
.upload-msg-style {
  color: #cccccc;
}
.top-title-group {
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 20px;
  margin-bottom: 20px;
}
.password-title-style {
  padding-top: 20px;
  border-top: 1px solid #f2f2f2;
  margin-bottom: 20px;
}
</style>

<style>
.el-form--label-left .el-form-item__label {
  color: #c0c4cc;
}
</style>
